<template>


    <div class="page-box">
       <div class="page-title">
          {{ '产品出库' }}
       </div>
 
       <div class="page-search">
          <div class="search-box flex_start_center" :style="{ height: IsHeight }">
             <el-input v-model="pageData.keywords" placeholder="订单类型/采购单/出库入库单" @input="getAlltabeData"
                style="width: 200px; margin-right: 10px; margin-bottom: 10px;" />
                <div class="search-box-item flex_center_center" style="transform: translateY(-5px);">
                            <span class="margin-right-10">显示:</span>
                            <el-button :color="pageData.status === '1' ? '#172B4D' : ''" @click="handleStatusFilter('1')">
                                未入库
                            </el-button>
                            <el-button :color="pageData.status === '2' ? '#172B4D' : ''" @click="handleStatusFilter('2')">
                                部分入库
                            </el-button>
                            <el-button :color="pageData.status === '3' ? '#172B4D' : ''" @click="handleStatusFilter('3')">
                                全部入库
                            </el-button>
                        </div>
          </div>
 
          <div class="search-btn">
             <div class="btn_item" @click="handleClickHeight">
                <img class="btn_img" src="@/assets/sx.png" alt=""> <span> 高级筛选 </span>
             </div>
             <div class="btn_item">
                <img class="btn_img" src="@/assets/dc.png" alt=""> <span> 导出 </span>
             </div>
  
          </div>
 
       </div>
       <div class="search-btn-right">
       
       </div>
    </div>
 
    <div class="table-box">
 
       <el-table :data="tabeData" style="width: 100%" v-loading="loading" border
           default-expand-all    >
           <el-table-column align="center" prop="source_type_text" label="类型" width="120" >
            <template #default="scope">
                {{ scope.row.source_type_text }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="no" label="单号" width="200">
            <template #default="scope">
              <div style="color: blue; cursor: pointer;" @click="handleClickEdit(scope.row, 'details')">
               {{ scope.row.no }}
              </div>
            </template>
          </el-table-column>
        
          <el-table-column align="center" prop="date" label="日期" width="120" />
          <el-table-column align="center" prop="contact_name" label="负责人" width="120" />
          <el-table-column align="center" prop="contact_phone" label="联系电话" width="140" />

          <el-table-column align="center" prop="status" label="状态" width="120" >
            <template #default="scope">
                <el-tag type="warning" v-if="scope.row.status == '1'">待出库</el-tag>
                <el-tag type="success" v-if="scope.row.status == '2'">部分出库</el-tag>
                <el-tag type="danger" v-if="scope.row.status == '3'">已出库</el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="note" label="备注" width="120" />

          <el-table-column align="center" prop="creator_name" label="创建人" width="120" />
          <el-table-column align="center" prop="created_at" label="创建时间" width="180" />
          <el-table-column align="center" prop="audit_admin_name" label="审批人" width="120" />
          <el-table-column align="center" prop="audited_at" label="审批时间" width="180" />

          <el-table-column fixed="right"  align="center" prop="operation" label="操作" >
            <template #default="scope">
                <!-- <el-button type="primary" size="small" @click="handleClickEdit(scope.row, 'edit')">出库</el-button> -->
                <el-button :disabled="scope.row.status == '3'" type="primary" size="small" @click="handleClickEdit(scope.row, 'edit')">出库</el-button>
            </template>
          </el-table-column>

       </el-table>
    </div>
 
    <!-- 分页 -->
    <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
       :page-size="pageData.page_size" :total="total" />
    <!-- 出库 -->
    <OutboundDialog v-model:dialogVisible="isShow" :dialogType="dialogType" :dialogRow="dialogRow" @submit="handleSubmit" />
    <!-- 详情 -->
    <storeDetails v-model:dialogVisible="DetailsVisible" :dialogRow="dialogRow" @submit="handleSubmit" />
 </template>
 
 <script setup lang="ts">

 import { ref, onMounted, watch } from "vue";

 import Pagination from "@/components/Pagination.vue";
 import { ElMessageBox, ElMessage } from 'element-plus';
 import OutboundDialog from "./components/ProductOutbound/OutboundDialog.vue";
 import storeDetails from "./components/storeDetails.vue";
 import api from "@/api";

 // 定义出库数据类型
 interface OutboundProduct {
    id: number;                // 出库ID
    no: string;                // 来源订单编号
    status: string;            // 状态: 1=已出库 2=部分出库 3=全部出库
    source_type: string;       // 类型: outbound_order = 来源退货
    source_id: number;         // 来源订单ID
    date: string;              // 日期
    note: string;              // 备注
    created_at: string;        // 创建时间
    creator_name: string;      // 创建人名称
    contact_name: string;      // 负责人名称
    contact_phone: string;     // 负责人电话
    audited_at: string;        // 审核时间
    audit_admin_name: string;  // 审核人
    status_text: string;       // 状态说明
    source_type_text: string;  // 来源订单类型说明
 }
 const DetailsVisible = ref<boolean>(false);

 let IsHeight = ref<number | string>(0);
 const isShow = ref<boolean>(false);
 let dialogType = ref<string>('');
 let dialogRow = ref<OutboundProduct>({} as OutboundProduct);

 let statusData = ref<string | null>('');

 const pageData = ref({
    page_size: 10,
    page: 1,
    status: '',
    keywords: "",
 });
 const total = ref(0);
 const tabeData = ref<OutboundProduct[]>([]);

 // 搜索关键词监听


 let nub = ref<number>(0);
 const handleClickHeight = () => {
    nub.value++;
    if (nub.value % 2 == 1) {
       IsHeight.value = '34px';
    } else {
       IsHeight.value = '0px';
    }
 }
 
 const pageSize = (e: number) => {
    pageData.value.page_size = e;
    getAlltabeData();
 }
 const getPage = (e: number) => {
    pageData.value.page = e
    getAlltabeData();
 }

 const handleClickEdit =  async (row: OutboundProduct, type: string) => {

   let res = await api.product.warehouse_product_out_detail({
    id: row.id,
   });

   if (res.code === 200) {
    console.log(res.data);
     dialogRow.value = res.data;
     dialogType.value = type;
     if (type == 'edit') {
      isShow.value = true;
     } else {
      DetailsVisible.value = true;
     }
   }  

 } 

 onMounted(() => {
    getAlltabeData();
 })
 
 // 获取出库列表
 const getAlltabeData = async () => {
    loading.value = true;
    try {
      const res = await api.product.warehouse_product_out_list({
        ...pageData.value,
      });

      if (res.code === 200) {
         tabeData.value = res.data.data;
         total.value = res.data.pager.total_records;
      }

    } catch (error) {
      console.error('获取出库列表失败', error);
    } finally {
      loading.value = false;
    }
 };
 
 const loading = ref(false);
 

 // 提交表单回调
 const handleSubmit = () => {
    getAlltabeData();
 }

// 处理状态筛选
const handleStatusFilter = (status: string) => {

    if (pageData.value.status == '') {
        pageData.value.status = status;
    } else if (pageData.value.status != '' && status == pageData.value.status) {
        pageData.value.status = '';
    } else {
        pageData.value.status = status;
    }

    getAlltabeData();
}

 
 </script>
 
 <style lang="scss" scoped>
 .btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
 }
 
 .main-warehouse {
    font-weight: bold;
    color: #333;
 }
 
 // 输入框样式
 :deep(.el-input__wrapper) {
    background-color: rgba(250, 252, 251, 1);
 }
 
 //表格样式
 :deep(.el-table) {
    --el-table-header-bg-color: rgba(235, 236, 240, 1);
 }
 
 :deep(.el-table thead) {
    color: #444;
 }
 
 // 子仓库行样式
 :deep(.sub-warehouse-row) {
    background-color: #fef6e5;
 }
 
 //分页样式
 .pagination {
    width: calc(100% - 250px);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 10px;
    border-top: 1px solid #98989848;
 }
 
 :deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: #000 !important;
 }
 </style>
 